<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鲁班购物车</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="js/jquery.step.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery.step.min.js"></script>
	</head>
	<body>
		<div id="web">
			<!--顶部-->
			<div class="top">
				<div class="top_login clearfix">
					<span class="fl t_lef"><a href="register_4.html">注册</a>|<a href="register_4.html">登录</a>|<a href="register_4_vip.html">VIP登录</a></span>
					<span class="fr t_rig"><a href="shopping_4.html">付款</a>|<a href="register_4.html">我的订单</a>|<a href="settle_4.html"><img src="img/gouwuche.png"/ style="vertical-align: middle;padding-right: 5px;"><b>(0)</b></a></span>
				</div>
			</div>
			<!--logo-->
			<div class="search clearfix">
				<div class="logo">
					<a href="index.html"><img src="img/logo.jpg" /></a>
				</div>
				<!--订单页面的订单部分-->
				<div class="main">
					<div id="step" class="clearfix"></div>
					<div class="btns">
						<button id="prevBtn">上一步</button>
						<button id="nextBtn">下一步</button>
						<button id="btn1">跳到第二步</button>
						<button id="btn2">跳到第三步</button>
					</div>
					<div class="info">index：<span id="index"></span></div>
				</div>
			</div>
			<hr />
			<!--以上是页面头部-->

			<!--购物车-->
			<div class="order_info clearfix">


				<form action="" method="post">
					<ul class="shopping_1">
						<li class="column"><a href="settle_4.html">购物车</a></li>
						<li>&nbsp;</li>
						<li>&nbsp;</li>
						<li>&nbsp;</li>
						<li class="ji_xu_gou_wu"><a href="index.html">继续购物></a></li>
					</ul>
					<ul class="shopping_1">
						<li class="column"><input  type="checkbox" name="" id="quan_xuan" value="" /><label for="quan_xuan">全选</label></li>
						<li>价格(元)</li>
						<li>&nbsp;&nbsp;&nbsp;&nbsp;数量</li>
						<li>&nbsp;小计(元)</li>
						<li>操作</li>
					</ul>
					<ul class="shopping_1 shop_dian">
						<li class="column"><input  type="checkbox" name="" id="dian_pu" value="" /><label for="dian_pu">某某直营店</label></li>
						<li>&nbsp;</li>
						<li>&nbsp;</li>
						<li>&nbsp;</li>
						<li>750.00</li>
					</ul>
					<ul class="shopping_car clearfix">
						<li class="column">
							<input class="fl" type="checkbox" name="" id="tp1" value="" />
							<label for="tp1">
								<img class="fl" src="img/shop_2.jpg" />
								<div class="pp_name fl">
									<p>商品品牌名称</p>
									<p><b>规格:</b>规格X规格</p>
									<p><b>颜色:</b>白色</p>
								</div>
							</label>
						</li>
						<li><span>150</span></li>
						<li>
							<span>
								<input class="min" name="" type="button" value="-" style="width: 15px;"/>
								<input class="text_box" name="" type="text" value="1" style="width: 34px;text-align: center;"/>
								<input class="add" name="" type="button" value="+" style="width: 15px;"/>
							</span>
						</li>
						<li><span>￥750.00</span></li>
						<li>
							<a href="">收藏</a><a href="">删除</a>
						</li>
					</ul>
					<ul class="shopping_1 shop_dian">
						<li class="column"><input  type="checkbox" name="" id="dian_pu2" value="" /><label for="dian_pu2">某某直营店</label></li>
						<li>&nbsp;</li>
						<li>&nbsp;</li>
						<li>&nbsp;</li>
						<li>750.00</li>
					</ul>
					<ul class="shopping_car clearfix">
						<li class="column">
							<input class="fl" type="checkbox" name="" id="tp2" value="" />
							<label for="tp2">
								<img class="fl" src="img/shop_2.jpg" />
								<div class="pp_name fl">
									<p>商品品牌名称</p>
									<p><b>规格:</b>规格X规格</p>
									<p><b>颜色:</b>白色</p>
								</div>
							</label>
						</li>
						<li><span>150</span></li>
						<li>
							<span>
								<input class="min" name="" type="button" value="-" style="width: 15px;"/>
								<input class="text_box" name="" type="text" value="1" style="width: 34px;text-align: center;"/>
								<input class="add" name="" type="button" value="+" style="width: 15px;"/>
							</span>
						</li>
						<li><span>￥750.00</span></li>
						<li>
							<a href="">收藏</a><a href="">删除</a>
						</li>
					</ul>
					
					<div class="pay_right fr">
						<table border="0" style="text-align: right;">
							<tr>
								
								<td>&nbsp;</td>
								<td>订单总额&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td>￥1200.00</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
								<td>优惠：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td><b>-￥0.00</b></td>
							</tr>
							<tr>
								<td>已经选中<span>8</span>个商品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td>合计<b>(不含运费)</b>：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
								<td><span>￥1200.00</span></td>
							</tr>
						</table>
						<a href="order.html">
							结算
						</a>
						
					</div>
				</form>
			</div>








		<!--底部-->
			<div class="di_bu">
				<div class="di_bu_main clearfix">
					<ul class="ul">
						<li>
							<img class="fl" src="img/you.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">品质保障</a></span><br />
								<span><a href="">品质保证</a> <a href="">购物无忧</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/sheng.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">特色服务</a></span><br />
								<span><a href="">针对户型</a> <a href="">私人定制</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/te.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">全网最低</a></span><br />
								<span><a href="">厂家直销</a> <a href="">低价承诺</a></span>
							</div>
							<img src="img/line.jpg" />
						</li>
						<li>
							<img class="fl" src="img/figure.jpg" />
							<div class="di_bu_a fl">
								<span><a href="">帮助中心</a></span><br />
								<span><a href="">您的购物指南</a></span>
							</div>
						</li>
					</ul>

					<ul class="di_bu_nav clearfix">
						<li>
							新手指南<br />
							<span><a href="">新手指南</a></span><br />
							<span><a href="">购物流程</a></span>
						</li>
						<li>
							支付方式<br />
							<span><a href="">支付宝</a></span><br />
							<span><a href="">微信支付</a></span>
						</li>
						<li>
							物流配送<br />
							<span><a href="">配送方式</a></span><br />
							<span><a href="">服务流程</a></span>
						</li>
						<li>
							客服中心<br />
							<span><a href="">在线客服</a></span><br />
							<span><a href="">常见问题</a></span></a>
						</li>
						<li>
							扫一扫，关注鲁班兄弟<br />
							<img src="img/QR.jpg" />
						</li>
					</ul>
				</div>
			</div>

			<!--版权尾部-->
			<footer>
				<div class="foot">
					<span>Copyright © 2015-2016 QDTG. All rights reserved. 鲁班兄弟 粤ICP16035771</span> |
					<a href="">关于我们</a>|
					<a href="">联系我们</a>|
					<a href="">法律声明</a>
				</div>
			</footer>
		</div>
	</body>
</html>
<style>
		button {
			display: inline-block;
			padding: 6px 12px;
			font-size: 14px;
			line-height: 1.42857143;
			text-align: center;
			cursor: pointer;
			border: 1px solid transparent;
			border-radius: 4px;
			color: #fff;
			background-color: #5bc0de;
		}
		
		.main {
			width: 597px;
			position: absolute;
			right: 0;
			top: 0;
			margin: 20px auto;
			margin-right: 40px;
		}
		
		#step {
			margin-bottom: 30px;
		}
		
		.btns {
			float: left;
		}
		
		.info {
			float: left;
			height: 34px;
			line-height: 34px;
			margin-left: 40px;
			font-size: 28px;
			font-weight: bold;
			color: #928787;
		}
		
		.info span {
			color: red;
		}
	</style>
	<script type="text/javascript">
		var $step = $("#step");
		var $index = $("#index");

		$step.step({
			index: 0,
			time: 500,
			title: ["购物车", "提交订单", "确认订单"]
		});

		$index.text($step.getIndex());

		$("#prevBtn").on("click", function() {
			$step.prevStep();
			$index.text($step.getIndex());
		});

		$("#nextBtn").on("click", function() {
			$step.nextStep();
			$index.text($step.getIndex());
		});

		$("#btn1").on("click", function() {
			$step.toStep(1);
			$index.text($step.getIndex());
		});

		$("#btn2").on("click", function() {
			$step.toStep(2);
			$index.text($step.getIndex());
		});
	</script>
	<script>
		$(function() {
			$(".add").click(function() {
				var t = $(this).parent().find('input[class*=text_box]');
				t.val(parseInt(t.val()) + 1)
				setTotal();
			})
			$(".min").click(function() {
				var t = $(this).parent().find('input[class*=text_box]');
				t.val(parseInt(t.val()) - 1)
				if(parseInt(t.val()) < 0) {
					t.val(0);
				}
				setTotal();
			})

			function setTotal() {
				var s = 0;
				$("#tab td").each(function() {
					s += parseInt($(this).find('input[class*=text_box]').val()) * parseFloat($(this).find('span[class*=price]').text());
				});
				$("#total").html(s.toFixed(2));
			}
			setTotal();

		})
	</script>
